<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autofill Demo - Checkout Form</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 600px;
            margin: 40px auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .form-container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            margin-bottom: 30px;
        }
        .form-section {
            margin-bottom: 30px;
        }
        .form-section h2 {
            color: #555;
            font-size: 18px;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 8px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
            font-weight: 500;
        }
        input, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            box-sizing: border-box;
        }
        input:focus, select:focus {
            outline: none;
            border-color: #007AFF;
        }
        .form-row {
            display: flex;
            gap: 15px;
        }
        .form-row .form-group {
            flex: 1;
        }
        button {
            background-color: #007AFF;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            width: 100%;
            margin-top: 20px;
        }
        button:hover {
            background-color: #0051D5;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h1>Checkout Form - Autofill Demo</h1>
        
        <form id="checkout-form" autocomplete="on">
            <!-- Personal Information -->
            <div class="form-section">
                <h2>Personal Information</h2>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="first-name">First Name</label>
                        <input type="text" id="first-name" name="fname" autocomplete="given-name" required>
                    </div>
                    <div class="form-group">
                        <label for="last-name">Last Name</label>
                        <input type="text" id="last-name" name="lname" autocomplete="family-name" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="email">Email Address</label>
                    <input type="email" id="email" name="email" autocomplete="email" required>
                </div>
                
                <div class="form-group">
                    <label for="phone">Phone Number</label>
                    <input type="tel" id="phone" name="phone" autocomplete="tel" required>
                </div>
            </div>
            
            <!-- Shipping Address -->
            <div class="form-section">
                <h2>Shipping Address</h2>
                
                <div class="form-group">
                    <label for="address1">Street Address</label>
                    <input type="text" id="address1" name="address1" autocomplete="address-line1" required>
                </div>
                
                <div class="form-group">
                    <label for="address2">Apartment, Suite, etc. (Optional)</label>
                    <input type="text" id="address2" name="address2" autocomplete="address-line2">
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="city">City</label>
                        <input type="text" id="city" name="city" autocomplete="address-level2" required>
                    </div>
                    <div class="form-group">
                        <label for="state">State/Province</label>
                        <input type="text" id="state" name="state" autocomplete="address-level1" required>
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="zip">ZIP/Postal Code</label>
                        <input type="text" id="zip" name="zip" autocomplete="postal-code" required>
                    </div>
                    <div class="form-group">
                        <label for="country">Country</label>
                        <select id="country" name="country" autocomplete="country-name" required>
                            <option value="">Select Country</option>
                            <option value="US">United States</option>
                            <option value="CA">Canada</option>
                            <option value="GB">United Kingdom</option>
                            <option value="AU">Australia</option>
                            <option value="DE">Germany</option>
                            <option value="FR">France</option>
                            <option value="JP">Japan</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- Payment Information -->
            <div class="form-section">
                <h2>Payment Information</h2>
                
                <div class="form-group">
                    <label for="cc-name">Name on Card</label>
                    <input type="text" id="cc-name" name="ccname" autocomplete="cc-name" required>
                </div>
                
                <div class="form-group">
                    <label for="cc-number">Card Number</label>
                    <input type="text" id="cc-number" name="cardnumber" autocomplete="cc-number" required>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="cc-exp">Expiration Date</label>
                        <input type="text" id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" required>
                    </div>
                    <div class="form-group">
                        <label for="cc-csc">Security Code</label>
                        <input type="text" id="cc-csc" name="cvc" autocomplete="cc-csc" required>
                    </div>
                </div>
            </div>
            
            <button type="submit">Complete Purchase</button>
        </form>
    </div>
    
    <script>
        document.getElementById('checkout-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Form submitted! (This is just a demo)');
        });
    </script>
</body>
</html>